<template>
    <div class="jd-detail">
        <JdHeader title="详情页" back></JdHeader>
        <van-swipe class="my-swipe" indicator-color="red">
            <van-swipe-item>
                <img :src="goodsInfo.img1" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img :src="goodsInfo.img2" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img :src="goodsInfo.img3" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img :src="goodsInfo.img4" alt="">
            </van-swipe-item>
        </van-swipe>
        <p id="name1">{{ goodsInfo.proname }}</p>
        <p class="price">￥{{ goodsInfo.originprice }}</p>
        <p class="desc">{{ goodsInfo.desc }}</p>

        <!-- 我是底部内容 -->
        <Teleport to="#jd-footer">
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
                <van-action-bar-icon @click="$router.push({ path: '/cart' })" icon="cart-o" text="购物车" />
                <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
                <van-action-bar-button type="warning" @click="addCart" text="加入购物车" />
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>
        </Teleport>


    </div>
</template>

<script setup lang="ts">
// 1.拿到商品 id
// 如果没有跳转回到列表页
// 如果有请求当前商品详细信息渲染在页面上
import { onMounted, ref } from 'vue'
import { useRoute, useRouter, type Router, type RouteLocationNormalized } from 'vue-router'
import { Dialog, Divider } from 'vant';
import { getGoodsDetailApi } from '@/api/goods'
import type { MyHotItem } from '@/config/interface'

const $route: RouteLocationNormalized = useRoute()
const $router: Router = useRouter()

// 验证是否存在proid
const testProid = () => {
    const proid = $route.query.proid

    // 判断是否存在 proid
    if (!proid) {
        // 提示用户,跳转回到列表页
        Dialog({
            title: '提示',
            message: '您要查看的商品不存在,请重试'
        }).then(() => {
            // console.log('关闭了对话框');
            $router.back()
        })

    }
    console.log(proid);

}

// 请求商品详细信息展示
// 准备一个数据表示商品详细信息
const goodsInfo = ref<MyHotItem>({} as MyHotItem)
const getGoodsInfo = async () => {
    const res = await getGoodsDetailApi($route.query.proid as string)
    console.log(res);
    goodsInfo.value = res.data
}

// 加入购物车
const addCart = () => {
    console.log('加入购物车');

}

onMounted(() => {
    testProid()
    getGoodsInfo()
})
</script>
<style scoped lang="scss">
.jd-detail {
    padding: 10px 10px;
    box-sizing: border-box;

    .van-image {
        padding: 0 auto;
        display: block;
        height: 400px;
    }

    #name1 {
        border: 1px solid skyblue;

    }

    .price {
        font-weight: 700;
        color: red;
    }

    .desc {
        line-height: 30px;
        height: 900px;
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
        border: 1px solid #999;

        img {
            width: 100%;
            height: 100%;
            display: block;
        }
    }
}
</style>